<template>
  <el-row class="up-row" >
    <el-col :span="4" :offset="17">
      <time>{{ timer }}</time>
    </el-col>
    <el-col :span="1">
      <img :src="userInfo.userimg" style="margin-top:20px;width:50px;height:50px; border-radius: 25px"/>
    </el-col>
    <el-col :span="2">
      <!-- 下拉菜单 -->
      <el-dropdown>
             <span class="el-dropdown-link" style="line-height: 100px; color: darkgray; border: 0px;margin-right: 60px">
               {{userInfo.username}}
             </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="User" @click="changeAvatar">修改头像</el-dropdown-item>
            <el-dropdown-item :icon="Setting">修改密码</el-dropdown-item>
            <el-dropdown-item :icon="CircleClose" @click="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>

  </el-row>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();

// 导入外部js文件，并命名为 globaljs
import globaljs from '@/assets/js/global'   // global.js 中 export导出未命名

const timer = ref(1);
const timerRef = ref();
const userInfo = reactive({
 'username': 'a',
 'userimg': require('@/assets/imgs/userphoto_default.jpg')
});

// 页面加载后，执行业务逻辑，onMounted中可以访问页面元素
onMounted(() => {
 // 从SessionStorage取出数据
 let userstr = sessionStorage.getItem('loginUser');
 if (userstr == null || userstr == undefined || userstr == '') {
   router.push('/login');
 } else {
   userInfo.username = JSON.parse(userstr).username;
 }
 
 // 获取日期时间
 timerRef.value = setInterval(() => {
   timer.value = globaljs.current();
 }, 1000);
});

// 页面停止加载（页面元素销毁，此函数中不能访问页面元素）
onUnmounted(() => {
 clearInterval(timerRef.value);
});

// 修改头像逻辑，示例函数，具体实现需根据实际需求调整
const changeAvatar = () => {
 // 执行修改头像的逻辑
};

// 退出登录逻辑
const logout = () => {
 // 清除登录信息等操作
 sessionStorage.removeItem('token');
 sessionStorage.removeItem('loginUser');
 
 // 跳转到登录页面
 router.push('/');
};
</script>

<style scoped>
.up-row {
 height: 100px;
 line-height: 100px;
 background-image: url("../assets/imgs/up.png");
  background-size: cover;
 font-weight: bold;
  width: 1500px;
}
/*去掉头像图标，鼠标移上去后的黑色边框*/
:deep(:focus-visible) {
 outline: none;
}
</style>
